<template>
  <!-- 账号信息-->
  <div class="layui-form layui-form-pane layui-tab-item layui-show">
    <validation-observer ref="observer" v-slot="{validate}">
      <validation-provider name="email" rules="required|email" v-slot="{errors}">
        <div class="layui-form-item">
          <label for="L_email" class="layui-form-label">邮箱</label>
          <div class="layui-input-inline">
            <input type="text" name="email" v-model="username" autocomplete="off" class="layui-input">
          </div>
          <!-- <div class="layui-form-mid layui-word-aux">如果您在邮箱已激活的情况下，变更了邮箱，需<a href="activate.html" style="font-size: 12px; color: #4f99cf;">重新验证邮箱</a>。</div> -->
          <div class="error layui-form-mid">
            <span style="color: #c00">{{ errors[0] }}</span>
          </div>
        </div>
      </validation-provider>

      <div class="layui-form-item">
        <validation-provider name="nickname" rules="required" v-slot="{errors}">
          <label for="L_username" class="layui-form-label">昵称</label>
          <div class="layui-input-inline">
            <input type="text" name="nickname" v-model="nickname" autocomplete="off" class="layui-input">
          </div>
          <div class="error layui-form-mid">
            <span style="color: #c00">{{ errors[0] }}</span>
          </div>
        </validation-provider>
      </div>
      <div class="layui-form-item">
        <label for="L_city" class="layui-form-label">城市</label>
        <div class="layui-input-inline">
          <input type="text" id="L_city" name="city" v-model="location" autocomplete="off" value="" class="layui-input">
        </div>
      </div>
      <div class="layui-form-item">
        <label for="L_gender" class="layui-form-label">性别</label>
        <div class="layui-input-inline custom1 ml1">
          <label for="gender1" class="custom2">
            <input id="gender1" type="radio" name="sex" value="0" title="男" v-model="gender">
            <i class="layui-icon layui-icon-circle" :class="{'layui-icon-radio':gender == '0'}"></i>
            男
          </label>
          <label for="gender2">
            <input id="gender2" type="radio" name="sex" value="1" title="女" v-model="gender">
            <i class="layui-icon layui-icon-circle" :class="{'layui-icon-radio':gender == '1'}"></i>
            女
          </label>
        </div>
      </div>
      <div class="layui-form-item layui-form-text">
        <label for="L_sign" class="layui-form-label">签名</label>
        <div class="layui-input-block">
          <textarea placeholder="随便写些什么刷下存在感" v-model="regmark" id="L_sign" name="sign" autocomplete="off" class="layui-textarea" style="height: 80px;"></textarea>
        </div>
      </div>
      <div class="layui-form-item">
        <button class="layui-btn" @click="validate().then(submit)">确认修改</button>
      </div>
    </validation-observer>

  </div>
</template>

<script>
import { updateUserInfo } from '@/api/user'
import { ValidationProvider, ValidationObserver } from 'vee-validate'
export default {
  name: 'my-info',
  components: {
    ValidationProvider, ValidationObserver
  },
  data () {
    return {
      username: '',
      nickname: '',
      location: '',
      regmark: '',
      gender: ''
    }
  },
  mounted () {
    const { username, nickname, location, regmark, gender } = this.$store.state.userInfo
    console.log(this.$store.state.userInfo)
    this.username = username || ''
    this.nickname = nickname || ''
    this.location = location || ''
    this.regmark = regmark || ''
    this.gender = gender || ''
  },
  methods: {
    async submit () {
      const isValid = await this.$refs.observer.validate()
      if (!isValid) {
        return
      }
      updateUserInfo({
        username: this.username,
        nickname: this.nickname,
        location: this.location,
        regmark: this.regmark,
        gender: this.gender
      }).then((res) => {
        if (res.code === 200) {
          this.$store.commit('setUserInfo', {
            ...this.$store.state.userInfo,
            ...{
              username: this.username,
              nickname: this.nickname,
              location: this.location,
              regmark: this.regmark,
              gender: this.gender
            }
          })
          this.$alert('更新成功')
        }
      })
    }
  }

}
</script>

<style lang='scss' scoped>
.custom1 {
  line-height: 38px;
  color: #999;
}
.custom2 {
  margin-right: 10px;
}
.layui-icon-radio {
  color: #5fc27b;
}
</style>
